<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>GUI</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/jquery.mobile-1.4.3.min.css">
	<link rel="stylesheet" href="css/jqm-demos.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<!--
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    -->
	<script type="text/javascript" src="js/jquery.js"></script>
    <script src="js/jquery.paginate.js" type="text/javascript"></script>
	<!--
	<script src="_assets/js/index.js"></script>
	-->
	<script src="js/jquery.mobile-1.4.3.min.js"></script>
</head>

<body>


	    <div data-role="navbar" data-iconpos="left">
	        <ul>
	            <li><a href="index.html" data-icon="grid" rel="external">My books</a></li>
	            <li><a href="screen2.html" data-icon="star" class="ui-btn-active" rel="external">All books on Server</a></li>
	        </ul>
	    </div><!-- /navbar -->
		
    <div data-role="content">
        <div class="ui-grid-a">
            <div class="ui-block-a block-center">
                <div class="img-left">
                    <a href="" id="img-row1-left"><img src="images/Book-icon.png"></a>
                </div>
                <div class="content-right">
                    <span>Title: </span><span><p>Cau Truc Du Lieu va Giai Thuat</p></span>
                    <span>Author: </span><span><p>Tho Phan</p></span>
                </div>
            </div>
            <div class="ui-block-b block-center">
                <div  class="img-left">
                    <a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop"><img src="images/Book-icon.png"></a>
                    <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
                        <div data-role="header" data-theme="a">
                        <h1>UPDATE</h1>
                        </div>
                        <div role="main" class="ui-content">
                            <h3 class="ui-title">Are you sure you want to update this book?</h3>
                        <p>This action cannot be undone.</p>
                            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Open old version</a>
                            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Update</a>
                        </div>
                    </div>
                    <div class="div-update">
                            <p>Update</p>
                    </div>
                </div>
                <div class="img-right">
                        <span>Title: </span><span><p>Cau Truc Du Lieu va Giai Thuat</p></span>
                        <span>Author: </span><span><p>Tho Phan</p></span>
                    </div>
            </div>
            <div class="ui-block-a block-center">
                <div>
                    <div class="img-left">
                        <a href="" id="img-row1-left"><img src="images/Book-icon.png"></a>
                    </div>
                    <div class="img-right">
                        <span>Title: </span><span><p>Cau Truc Du Lieu va Giai Thuat</p></span>
                        <span>Author: </span><span><p>Tho Phan</p></span>
                    </div>
                </div>
            </div>
            <div class="ui-block-b block-center">
                <div  class="img-left">
                    <a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop"><img src="images/Book-icon.png"></a>
                    <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
                        <div data-role="header" data-theme="a">
                        <h1>UPDATE</h1>
                        </div>
                        <div role="main" class="ui-content">
                            <h3 class="ui-title">Are you sure you want to update this book?</h3>
                        <p>This action cannot be undone.</p>
                            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Open old version</a>
                            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Update</a>
                        </div>
                    </div>
                    <div class="div-update">
                            <p>Update</p>
                    </div>
                </div>
                <div class="img-right">
                        <span>Title: </span><span><p>Cau Truc Du Lieu va Giai Thuat</p></span>
                        <span>Author: </span><span><p>Tho Phan</p></span>
                    </div>
            </div>
            <div class="ui-block-a block-center">
                <div  class="img-left">
                    <a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop"><img src="images/Book-icon.png"></a>
                    <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
                        <div data-role="header" data-theme="a">
                        <h1>UPDATE</h1>
                        </div>
                        <div role="main" class="ui-content">
                            <h3 class="ui-title">Are you sure you want to update this book?</h3>
                        <p>This action cannot be undone.</p>
                            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Open old version</a>
                            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Update</a>
                        </div>
                    </div>
                    <div class="div-update">
                            <p>Update</p>
                    </div>
                </div>
                <div class="img-right">
                        <span>Title: </span><span><p>Cau Truc Du Lieu va Giai Thuat</p></span>
                        <span>Author: </span><span><p>Tho Phan</p></span>
                    </div>
            </div>
            <div class="ui-block-b block-center">
                <div>
                    <div class="img-left">
                        <a href="" id="img-row1-left"><img src="images/Book-icon.png"></a>
                    </div>
                    <div class="img-right">
                        <span>Title: </span><span><p>Cau Truc Du Lieu va Giai Thuat</p></span>
                        <span>Author: </span><span><p>Tho Phan</p></span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="paging">
            <div id="paging"></div>
    </div>
    <script type="text/javascript">
            $(function() {
                $("#paging").paginate({
                    count       : 50,
                    start       : 20,
                    display     : 12,
                    border                  : true,
                    border_color            : '#BEF8B8',
                    text_color              : '#68BA64',
                    background_color        : '#E3F2E1',    
                    border_hover_color      : '#68BA64',
                    text_hover_color        : 'black',
                    background_hover_color  : '#CAE6C6', 
                    rotate      : false,
                    images      : false,
                    mouse       : 'press'
                });
            });
    </script>   
</body>
</html>